<template>
  <!--超值补贴及领取优惠券弹框-->
  <x-modal
    :visible.sync="show"
    width="750"
    padding="0"
    background="transparent"
  >
    <view class="p-coupon-drawer">
      <template v-if="!isOpened">
        <x-send-coupon v-if="allCouponSend" :coupon="allCouponSend" @sendcoupon="onCustomEvent">
          <view class="_send-coupon">
            <view class="_send">
              <view class="_pic">
                <x-image src="/assets/images/open-pop-bg.gif" mode="widthFix" />
              </view>
            </view>

            <view v-if="popupStatus" class="_close_send_coupon">
              <x-icon name="icon-003" size="40" color="#fff"/>
            </view>
          </view>
        </x-send-coupon>

        <view v-else class="_send-coupon" @click="handleOpen">
          <view class="_send">
            <view class="_pic">
              <x-image src="/assets/images/open-pop-bg.gif" mode="widthFix" />
            </view>
          </view>

          <view v-if="popupStatus" class="_close_send_coupon">
            <x-icon name="icon-003" size="40" color="#fff"/>
          </view>
        </view>
      </template>

      <template v-else>
        <view class="result-wrapper" @click="handleClose">
          <view class="result-container">
            <view class="result-header">
              <x-image src="/assets/images/open-pop-title.png" mode="widthFix" />
            </view>
            <view class="result-content">
              <view class="title">恭喜抢到超级补贴</view>
              <view class="amount">
                {{ superSubsidyModule.value}}
              </view>
              <view class="tips">限时优惠，立即可用</view>
            </view>
          </view>
        </view>

        <view v-if="popupStatus" class="_close_send_coupon" style="top: 28%" @click="handleClose">
          <x-icon name="icon-003" size="40" color="#fff"/>
        </view>
      </template>

      <view v-if="!popupStatus" class="_close_send_coupon" @click="onCloseCoupon">
        <x-icon name="icon-003" size="40" color="#fff"/>
      </view>
    </view>
  </x-modal>
</template>

<script>
import { mapState } from 'vuex';

import XSendCoupon from '@/components/x-send-coupon';
import XModal from '@/components/x-modal';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';

export default {
  name: 'PCouponDrawer',
  components: {
    XSendCoupon,
    XModal,
    XIcon,
    XImage
  },
  props: {
    allCouponSend: {
      type: Object,
      default: () => {}
    },
    couponStyleImageUrl: {
      type: String,
      default: ''
    },
    query: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: true,
      isOpened: false
    };
  },
  computed: {
    ...mapState({
      // 一键开启/关闭视频号场景挽留弹框
      popupStatus: state => state['pages'].popupStatus,
      // 超值补贴模块
      superSubsidyModule: state => state['product'].pageModule?.superSubsidy
    })
  },
  created() {
  },
  methods: {
    // 领取优惠券并下单
    onCustomEvent(res) {
      this.isOpened = true;
      this.setTimer();
      this.$emit('onSendCoupon', res);
    },
    // 关闭领券弹框
    onCloseCoupon() {
      if (this.isOpened) {
        this.handleClose();
      } else {
        this.$emit('onCloseCoupon');
      }
    },

    handleOpen() {
      this.isOpened = true;
      this.setTimer();
    },

    handleClose() {
      this.$emit('close');
    },

    setTimer() {
      setTimeout(() => {
        this.$emit('close');
      }, 3000);
    }
  }
};
</script>

<style lang="scss">
.p-coupon-drawer {
  ._send-coupon{ background-color: transparent; width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center;}
  ._send{
    position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 592px; max-height: 1100px; display: flex; flex-direction: column; justify-content: center;
    ._close{ display: flex; justify-content: center; padding: 20px;}
  }
  ._close_send_coupon{ position: absolute; right: 10%; top: 20%; transform: translate3d(-50%, 0, 0);}

  .result-wrapper{
    height: 100vh;
    animation: zoomIn 0.3s ease-in-out;
    .result-container{
      position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);
      width: 592px;

      .result-header{
        padding: 0 30px;
        margin-bottom: 20px;
      }
      .result-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 60px;
        background: #FEFAEE;
        color: #643F2A;
        text-align: center;
        height: 450px;

        .title{
          font-size: 44px;
          font-weight: 500;
        }

        .amount{
          font-size: 160px;
          color: #DD3C42;

          &:after{
            content: '元';
            font-size: 46px;
          }
        }

        .tips{
          font-size: 30px;
        }
      }
    }
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50%, 100% {
    opacity: 1;
  }
}
</style>
